<template>
  <div class="splash-screen" v-if="visible" @click="skipAnimation">
    <div class="glow-bg"></div>
    <div class="logo-container">
      <img src="@/assets/logo_128.png" alt="Logo" class="logo" />
      <h1>XiusCraft</h1>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { gsap } from 'gsap'

// 检测是否是页面刷新
// 或者使用更新的API（推荐）
const isPageReload = () => {
  const entries = performance.getEntriesByType('navigation')
  return entries.length > 0 && entries[0].type === 'reload'
}

// 只在页面刷新或首次访问时显示
const visible = ref(isPageReload() || !localStorage.getItem('splashShown'))

const skipAnimation = () => {
  gsap.killTweensOf(".splash-screen")
  visible.value = false
}

onMounted(() => {
  if (!visible.value) return

  localStorage.setItem('splashShown', 'true')

  // 动画设置（保持你之前的缩短版）
  gsap.from(".logo", {
    y: -100,
    opacity: 0,
    duration: 0.8,
    ease: "bounce.out",
  })

  gsap.from("h1", {
    y: 50,
    opacity: 0,
    duration: 0.8,
    delay: 0.2,
    ease: "power3.out"
  })

  gsap.to(".glow-bg", {
    opacity: 0.3,
    duration: 1.5,
    ease: "power1.out",
    repeat: 1,
    yoyo: true
  })

  setTimeout(() => {
    gsap.to(".splash-screen", {
      boxShadow: "0 0 60px 30px rgba(68, 170, 255, 0.7)",
      scale: 1.3,
      opacity: 0,
      duration: 1.2,
      ease: "power4.out",
      onComplete: () => {
        visible.value = false
      }
    })
  }, 800)
})
</script>

<style scoped>
/* 保持之前的样式不变 */
.splash-screen {
  position: fixed;
  z-index: 9999;
  background: radial-gradient(circle at center, #0a0a1a, #000);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
}

.glow-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(68,170,255,0.1) 0%, transparent 70%);
}

.logo-container {
  text-align: center;
  z-index: 2;
}

.logo {
  width: 90px;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.2rem;
  color: #ffffffcc;
  font-weight: 600;
  letter-spacing: 2px;
}
</style>